<template>
	<view class="content">
		<!-- 搜索框 -->
		<u--input class="inp" placeholder="请输入内容" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399">
		</u--input>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
			<swiper-item v-for="(item ,index) in list" :key="index">
				<image :src="item.src" mode="" class="img"></image>
			</swiper-item>
		</swiper>
		<!-- 中间导航 -->
		<ul class="navs">
			<li v-for="(item ,index) in list1" :key="index" @click='gotomodel(index)'>
				<image :src="item.src" mode="" class="img1"></image>
				<view class="text">
					{{item.name}}
				</view>
			</li>
		</ul>
		<!-- 优惠券部分 -->
		<!-- 微信开发者 -->
		<scroll-view scroll-x='true'>
			<view class="box_item">
				<view class="quan">

					<view class="box" v-for="(item,index) in list2" :key="index">
						<view class="cot">
							<view class="price">￥{{item.price}}</view>
							<view class="wz">{{item.value.title}}</view>
						</view>
						<view class="lq">领取</view>
					</view>

				</view>
			</view>
		</scroll-view>
		<!-- 拼团 -->
				<view class="pt">拼团</view>
					<view class="box-pt">
				<scroll-view scroll-x="true">
			    <ul class="pt_item">
					<li v-for="(item,index) in list3" :key="index" class="pt_li">
						<image :src="item.cover" ></image>
						<p>{{item.title}}</p>
						<p>
							<span class='sp1'>￥{{item.price}}</span>
							<span class='sp2'>￥{{item.t_price}}</span>
						</p>
					</li>
				</ul>
				</scroll-view>
			</view>
		  <!-- 最新列表 -->
		  <view class="zx-item">
			  <view class="zx">最新列表</view>
			  <view class="more" @click="getmore">查看更多</view>
		  </view>
		  
		  <view class="zx-list"   v-for="(item,index) in list4" :key="index">
		  	<view class="box-list" >
		  		<view class="img-list">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="pic-list">
					<view class="pic-list1">{{item.title}}</view>
					<view class="pic-list2">
				     <span class='sp1'>￥{{item.price}}</span>
					<span class='sp2'>￥{{item.t_price}}</span>
					</view>
				</view>
		  	</view>
			</view>
		   <!-- 底部图片 -->
		 <view class="box-foo">
		 	<image src="https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/dishaweb/08C9150BC2B163AEC012D6E544C75DD2.png" mode=""></image>
		 </view>

	</view>
</template>

<script>
	import {
		getswiper,
		getnav,
		getquan,
		getpt,
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				list: [], // 存放轮播图数据
				list1: [], // 存储导航数据
				list2: [], //存放优惠券数据
				list3: [], // 存放拼团数据
				list4:[],// 存放最新数据
			}
		},
		onLoad() {
			this.getlist()
			this.getlist1()
		    this.getlist2()
			this.getlist3()
			this.getlist4()
		},
		methods: {
			// 轮播数据
			async getlist() {
				var {
					data
				} = await getswiper()
				console.log(data);
				this.list = data[1].data
			},
			// 导航数据
			async getlist1() {
				var {
					data
				} = await getnav()
			 console.log(data);
				this.list1 = data[2].data
			},
			//优惠券数据
			async getlist2() {
				var {data} = await getquan()
				console.log(99999,data);
				this.list2 = data
			},
			//拼团数据
			async getlist3() {
				var res = await getpt()
				console.log(res);
				this.list3 = res.data.rows
			},
			// 最新列表数据
			async getlist4() {
				var {
					data
				} = await getswiper()
			 console.log(6666,data);
				this.list4 = data[5].data
			},
			
			//点击查看更多
			getmore(){
				uni.navigateTo({
					url:'../more/more'
				})
			},
			
			//导航栏跳转
			gotomodel(index){
				console.log(index);  // 拿到每个导航的下标
				if(index==1){
					uni.navigateTo({
						url:'/pages/test/test'
					})
				}
				if(index==6){
					uni.navigateTo({
						url:'/pages/booklist/booklist'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.inp {
		width: 90%;
		margin: auto;
		background-color: #f5f6f1;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 737rpx;
		height: 307rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.navs {
		width: 100%;
		height: 314rpx;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
		text-align: center;
		list-style: none;
		box-sizing: border-box;
		padding: 25rpx;

		li {
		 width: 24%;

			.text {
				font-size: 24rpx;
				color: #6c757d;
			}
		}
	}

	.img1 {
		width: 72rpx;
		height: 72rpx;
	}

	// 优惠券部分
	.box_item {
		width: 500%;

		.quan {
			
			width: 100%;
			height: 150rpx;
			// background-color: pink;
			box-sizing: border-box;
			padding: 20rpx;
			display: flex;

			.box {
				width: 15%;
				height: 120rpx;
				display: flex;
				margin: 0px 20px;
				color: white;

				.cot {
					width: 80%;
					height: 100%;
					background-color: #d39e00;
					border-right: 4rpx dashed #fff;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					padding: 20rpx;

					.price {
						flex: 1;
						text-align: center;
		 			font-size: 25rpx;
					}

					.wz {
						flex: 1;
						text-align: center;
						font-size: 25rpx;
					}


				}

				.lq {
					width: 20%;
					height: 100%;
					background-color: #ffbb12;
					text-align: center;
					line-height: 110rpx;
					font-size: 25rpx;
					color: white
				}
			}
		}
	}

	// 拼团部分


		.pt {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			color: black;
			font-size: 30rpx;
			font-weight: 600;
			// background-color: #d39e00;
			border-top: 15rpx solid #f5f5f3;
			box-sizing: border-box;
			padding: 0 20rpx;
		}
	.box-pt {
		// height: 450rpx;
		// background-color: pink;
		.pt_item{
			width: 260%;
			height: 340rpx;
			display: flex;
			flex-direction: row;
			list-style: none;
			box-sizing: border-box;
			padding: 20rpx;
			justify-content: space-between;
			border-bottom: 15rpx solid #f5f5f3;
			pt_li{
				width: 22%;
				imag{
					width: 100%;
					height: 100%;
				}
			}
			p{
				font-size: 23rpx;
			}
			.sp1{
				color: #dc3545;
				font-size: 28rpx;
			}
			.sp2{
				color: #b2aeaa;
			}
		}
	}
	
	// 最新列表
	.zx-item{
		width: 100%;
		height: 110rpx;
		// background-color: pink;
		display: flex;
		flex-direction: row;
		.zx{
			flex: 4;
			// background-color: #6c757d;
			box-sizing: border-box;
			line-height: 110rpx;
			font-size: 35rpx;
			font-weight: 600;
			padding-left: 20rpx;
		}
		.more{
		flex: 1;
		// background-color: red;	
		line-height: 110rpx;
		font-size: 25rpx;
	    text-align: center;
		color: #ccc;
		}
	}
	.zx-list{
		width: 100%;
		height: 230rpx;
		display: flex;
        justify-content: center;
		align-items: center;
		.box-list{
	      width: 94%;
		  height: 185rpx;
		  display: flex;
		}
		.img-list{
			flex: 0.8;
			image{
			width: 100%;
			height: 100%;
			}
		}
		.pic-list{
			flex: 1;
			 display: flex;
			 flex-direction: column;
			.pic-list1{
				flex: 0.8;
			    box-sizing: border-box;
				color: black;
				font-size:30rpx;
				padding: 10rpx;
				// overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
				//       white-space: nowrap;//（设置文字在一行显示，不能换行）
				//       text-overflow: ellipsis;//（规定当文本溢出时，显示省略符号来代表被修剪的文本）	
			
			}
			.pic-list2{
				flex: 1;
				line-height: 140rpx;
				// background-color:red;
				.sp1{
					font-size: 30rpx;
					color: #dc3545;
				}
				.sp2{
					font-size: 20rpx;
					color: #ccc;
				}
			}
		}
	}
	
	.box-foo{
		width: 100%;
		height: 382rpx;
		background-color: pink;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>
